//分页渲染 使用window.onload方式
// window.onload = function () {
$.ajax({
  type: "post",
  url: "http://118.195.129.130:3000/food/getInfoByPage",
  data: {
    page: 1,
    per_page: 5,
  },
  success: function (data) {
    if (data.err === 0) {
      alert("渲染成功");
      var xuanran_arr = [data];
      console.log(xuanran_arr);
      console.log(xuanran_arr[0].data.length);
      for (let i = 0; i < xuanran_arr[0].data.length; i++) {
        var tbody = document.querySelector("tbody");
        let tr = document.createElement("tr");
        console.log(xuanran_arr[0].data[i].desc);
        tbody.append(tr);
        tr.className = "rendering_tr";
        tr.innerHTML = `
                   <td calss="rendering_td_name">${xuanran_arr[0].data[i].name}</td>
                   <td calss="rendering_td_price">${xuanran_arr[0].data[i].price}</td>
                   <td calss="rendering_td_desc">${xuanran_arr[0].data[i].desc}</td>
                   <td calss="rendering_td_typename">${xuanran_arr[0].data[i].typename}</td>
                   <td calss="rendering_td_typeid">${xuanran_arr[0].data[i].typeid}</td>
                   <td> 
                   <a href="javascript:;" class="btn_delect" onclick=" tbody.removeChild(this.parentNode.parentNode);"> 删除 </a>
                   <a href="javascript:;" class="btn_change" onclick="one();"> 修改 </a>
                   </td>`;
      }
    } else {
      alert("渲染失败！");
    }
  },
  error: function (err) {
    console.log(err);
  },
});
// };
//添加功能
var add = document.querySelector(".add");
var hidden_add = document.querySelector(".hidden_add");
var hidden_add_btn_tip = document.querySelector(".hidden_add_btn_tip");
var hidden_add_btn_Second = document.querySelector(".hidden_add_btn_Second");
var tbody = document.querySelector("tbody"); //获取tbody

var hidden_add_textArea_one_right = document.querySelector(
  ".hidden_add_textArea_one_right"
);
var hidden_add_textArea_two_right = document.querySelector(
  ".hidden_add_textArea_two_right"
);
var hidden_add_textArea_three_right = document.querySelector(
  ".hidden_add_textArea_three_right"
);
var hidden_add_textArea_four_right = document.querySelector(
  ".hidden_add_textArea_four_right"
);
var hidden_add_textArea_five_right = document.querySelector(
  ".hidden_add_textArea_five_right"
);
var hidden_add_btn = document.querySelector(".hidden_add_btn");
var hidden_add_delect = document.querySelector(".hidden_add_delect");
//添加功能时数据不全时提示，以及全的时候实现的添加功能
add.onclick = function () {
  alert("a");
  hidden_add.style.display = "block";
  hidden_add_delect.onclick = function () {
    hidden_add.style.display = "none";
  };
  hidden_add_btn.onclick = function () {
    if (
      hidden_add_textArea_one_right.value == "" ||
      hidden_add_textArea_two_right.value == "" ||
      hidden_add_textArea_three_right.value == "" ||
      hidden_add_textArea_four_right.value == "" ||
      hidden_add_textArea_five_right.value == ""
    ) {
      alert("您输入的数据不全！");
    } else {
      var datas_one = [
        {
          name: hidden_add_textArea_one_right.value,
          price: hidden_add_textArea_two_right.value,
          desc: hidden_add_textArea_three_right.value,
          typename: hidden_add_textArea_four_right.value,
          typeid: hidden_add_textArea_five_right.value,
        },
      ];
      var tbody = document.querySelector("tbody");
      let tr = document.createElement("tr");
      tbody.appendChild(tr);
      tr.className = "rendering_tr";
      tr.innerHTML = `
                   <td calss="rendering_td_name">${hidden_add_textArea_one_right.value}</td>
                   <td calss="rendering_td_price">${hidden_add_textArea_two_right.value}</td>
                   <td calss="rendering_td_desc">${hidden_add_textArea_three_right.value}</td>
                   <td calss="rendering_td_typename">${hidden_add_textArea_four_right.value}</td>
                   <td calss="rendering_td_typeid">${hidden_add_textArea_five_right.value}</td>
                   <td> 
                   <a href="javascript:;" class="btn_delect" onclick="  tbody.removeChild(this.parentNode.parentNode);"> 删除 </a>
                   <a href="javascript:;" class="btn_change" onclick="one();"> 修改 </a>
                   </td>`;
      hidden_add_btn_Second.style.display = "block";
      hidden_add_btn_tip.style.display = "block";
      hidden_add_btn_tip.onclick = function () {
        clearInterval(timer);
        timer = null; //清除定时器
        hidden_add_btn_Second.style.display = "none";
        hidden_add_btn_tip.style.display = "none";
      };
      var timer = setInterval(function () {
        hidden_add.style.display = "none";
      }, 4000);
    }
    $.ajax({
      type: "post",
      url: "http://118.195.129.130:3000/food/add",
      data: {
        name: $(".hidden_add_textArea_one_right").val(),
        price: $(".hidden_add_textArea_two_right").val(),
        desc: $(".hidden_add_textArea_three_right").val(),
        typename: $(".hidden_add_textArea_four_right").val(),
        typeid: $(".hidden_add_textArea_five_right").val(),
      },
      success: function (data) {
        if (data.err === 0) {
          alert("添加成功！");
          console.log(data);
        } else {
          alert("添加失败！");
        }
      },
      error: function (err) {
        console.log(err);
      },
    });
    hidden_add_textArea_one_right.value = "";
    hidden_add_textArea_two_right.value = "";
    hidden_add_textArea_three_right.value = "";
    hidden_add_textArea_four_right.value = "";
    hidden_add_textArea_five_right.value = "";
    add.onclick = function () {
      hidden_add.style.display = "block";
      hidden_add_btn_Second.style.display = "none";
      hidden_add_btn_tip.style.display = "none";
      clearInterval(timer);
      timer = null; //清除定时器
    };
  };
};
// 4 删除操作 开始
//创建单元格和删除操作
// var datas = [
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
// ];
// //往tbody创建行，有几人创建几行
// var tbody = document.querySelector("tbody");
// for (var i = 0; i < datas.length; i++) {
//   //外边的for循环管行
//   // 1 创建行
//   var tr = document.createElement("tr");
//   tbody.appendChild(tr);
//   tr.className = "class_tr";
//   //行里边创建单元格 td 单元格的数量取决于每个对象里面的属性的个数
//   for (var k in datas[i]) {
//     // 2 创建单元格(跟数据有关系的3个单元格)
//     var td = document.createElement("td");
//     //把对象里面的属性值给  td
//     //for(var k in obj){
//     //     k 得到的是属性名
//     //     obj[k]得到的是属性值
//     // }
//     td.innerHTML = datas[i][k];
//     tr.appendChild(td);
//     td.className = "class_td";
//   }
//   // 3 创建有删除两字的单元格
//   var td = document.createElement("td");
//   td.innerHTML =
//     '<a href="javascript:;"  class="btn_delect"> 删除 </a> <a href="javascript:;" class="btn_change"> 修改 </a>';
//   tr.appendChild(td);
// }
// 4 删除操作 开始
//  window.onload = function () {
// var btn_delect_id = document.getElementById("btn_delect_id");
// window.onload = function () {
  var btn_delect = document.querySelectorAll(".btn_delect");
  var rendering_tr = document.querySelectorAll(".rendering_tr");
  var rendering_td_name = document.querySelectorAll(".rendering_td_name");
  var rendering_td_price = document.querySelectorAll(".rendering_td_price");
  var rendering_td_desc = document.querySelectorAll(".rendering_td_desc");
  var rendering_td_typename = document.querySelectorAll(
    ".rendering_td_typename"
  );
  var rendering_td_typeid = document.querySelectorAll(".rendering_td_typeid");
  alert(rendering_tr.length);

// };

// for(let i = 0;i<btn_delect.length;i++){
// btn_delect.onclick =function(){
// alert('a');
// }
// console.log('a');
// }
// }
// function change() {
//   for (let i = 0; i < rendering_tr.length; i++) {
// rendering_tr[i].onclick = function () {
//   alert("请问您真的要删除么？");
//点击a所在的行，(链接的爸爸的爸爸)，node.removeChild(child)
//   tbody.removeChild(this.parentNode.parentNode);
//   btn_delect.onclick = function () {
// alert("a");
// this.parentNode.parentNode.remove(tr);
// $.ajax({
//   type: "post",
//   url: "http://118.195.129.130:3000/food/del",
//   data: {
//     _id: $(".id_tr"),
//   },
//   success: function (data) {
//     if (data.err === 0) {
//       alert("删除成功");
//       console.log(data);
//     } else {
//       alert("删除失败");
//       console.log(data);
//     }
//   },
//   error: function (err) {
//     console.log(err);
//   },
// });
//   };
// };
//   }
// }
// change();
//修改操作
// var id_table = document.getElementById("id_table");
// var change_a = id_table.getElementsByClassName("btn_change");
//为修改操作的每一个a绑定事件
// one();
// function one() {
//   for (let i = 0; i < change_a.length; i++) {
//     change_a[i].onclick = function () {
//       alert("您现在可以修改数据了！");
//获取该a的tr
//   let tr = this.parentNode.parentNode;
//   var tds = tr.getElementsByClassName("class_td");
//获取到的每一个td为它们绑定点击事件
//   for (let i = 0; i < tds.length; i++) {
//     tds[i].setAttribute("contenteditable", "plaintext-only");
// tr.onblur = function(){
//   alert('a');
//   tds[i].setAttribute('contenteditable','');
//  };
//   }
// };
//   }
// }
//搜索功能
// setDatas(value);
// function setDatas(mydatas) {
//   tbody.innerHTML = "";
//   mydatas.forEach(function (value) {
//     var tr = document.createElement("tr");
//     tr.innerHTML = `<td class="class_td">${value.name}</td>
//                  <td class="class_td">${value.class}</td>
//                  <td class="class_td">${value.office}</td>
//                  <td>
//                  <a href="javascript:;" class="btn_delect"> 删除 </a>
//                  <a href="javascript:;" class="btn_change"> 修改 </a>
//                  </td>`;
// tbody.appendChild(tr);
// var td = document.createElement("td");
// td.innerHTML = `
// <a href="javascript:;" class="btn_delect"> 删除 </a> <a href="javascript:;" class="btn_change"> 修改 </a>`;
// tr.appendChild(td);
//   });
// }
// var name_btn = document.querySelector(".name_btn");
// var class_btn = document.querySelector(".class_btn");
// var office_btn = document.querySelector(".office_btn");
// var title_select_one_right = document.querySelector(".title_select_one_right");
// var title_select_two_right = document.querySelector(".title_select_two_right");
// var title_select_three_right = document.querySelector(
//   ".title_select_three_right"
// );
// name_btn.onclick = function () {
//   var nodesArray = Array.prototype.slice.call(
//     document.querySelectorAll(".class_td")
//   );
//   // console.log(nodesArray);
//   nodesArray.some(function (value) {
//     if (nodesArray == name_btn.value) {
//       return true;
//     }
//   });
//   setDatas();
// };
